<script setup lang="ts">
defineOptions({
  name: "Product"
});

import { reactive, ref, onMounted } from "vue";
import {
  getContainerStatus,
  getUserServer,
  getUserContainerD
} from "@/api/user";
onMounted(() => {
  nowState();
  getServer();
});
import { useRouter } from "vue-router";
const router = useRouter();
const nowState = async () => {
  getList().then(async () => {
    const promises = user_servers.value.map(async item => {
      if (item.container_state > 1) {
        getContainerStatus({ container_id: item.container_id })
          .then(res => {
            if (res.data.data.code == 200) {
              if (res.data.data.data.state === true) {
                item.concatainer_state = 2;
              } else {
                item.container_state = 3;
              }
            } else {
              item.container_state = 3;
            }
          })
          .catch(err => {
            item.container_state = 3;
          });
      }
      return item; // 返回修改后的项，以便替换原数组
    });
    // 等待所有异步操作完成
    const updatedServers = await Promise.all(promises);
    // 更新user_servers.value
    user_servers.value = updatedServers;
  });
};
//服务器
const options = ref([{ name: "全部", id: "" }]);
const getServer = async () => {
  let res = await getUserServer();
  res = res.data.map(item => {
    return {
      name: item.name,
      id: item.server_id
    };
  });
  options.value = options.value.concat(res);
};
const tochange = () => {
  console.log("切换了", containerBox.server_id);
  nowState();
};
const containerBox = reactive({
  page: 1,
  count: 10,
  server_id: ""
});
const user_servers = ref([]);
const total = ref(10);
//获取容器列表
const getList = async () => {
  let cons = await getUserContainerD(containerBox);
  user_servers.value = cons.data.data;
  total.value = cons.data.count;
};

const handleCurrentPageChange = async newPage => {
  containerBox.page = newPage;
  nowState();
};
const handlePageSizeChange = async newSize => {
  containerBox.count = newSize;
  nowState();
};
function uniqueConnectTypes(containerConnects) {
  return [...new Set(containerConnects.map(item => item.connect_type))];
}
const handleTagClick = row => {
  if (row.container_state === 0) {
    // 这里是当状态为"未支付"时的处理逻辑
    router.push("/order/orderlist");
  }
};
const toDetail = (state, id, type) => {
  router.push(`/self/container?container_id=${id}&type=${type[0]}`);
};
</script>

<template>
  <div class="body">
    <el-select v-model="containerBox.server_id" placeholder="请选择容器地区" style="width: 240px" @change="tochange">
      <el-option v-for="(item, index) in options" :key="item.index" :label="item.name" :value="item.id" />
    </el-select>
    <div class="table-box m-t-20px">
      <el-table class="table_el" :data="user_servers" style="width: auto">
        <el-table-column label="ID" show-overflow-tooltip>
          <template #default="scope">
            <span @click="
              router.push(
                `/self/container?container_id=${scope.row.container_id}`
              )
              ">{{ scope.row.container_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购买价格/元" prop="pay" />

        <el-table-column label="网络类型">
          <template #default="scope">
            <el-tag v-for="item in uniqueConnectTypes(scope.row.container_connects)" style="margin: 5px">{{
              item == "nginx"
                ? "域名转发"
                : item == "floating_ip"
                  ? "独立ip"
                  : "端口转发"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.container_state == 0 || scope.row.container_state == 1
                ? 'info'
                : scope.row.container_state == 2
                  ? 'success'
                  : 'danger'
              " @click.native="handleTagClick(scope.row)">{{
                scope.row.container_state == 0
                  ? "未支付"
                  : scope.row.container_state == 1
                    ? "未开通"
                    : scope.row.container_state == 2
                      ? "开机"
                      : "关机"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="所属镜像">
          <template #default="scope">
            {{
              scope.row.image.show_name
                ? scope.row.image.show_name
                : scope.row.image.name
            }}
          </template>
        </el-table-column>
        <el-table-column label="到期时间" prop="become_time" show-overflow-tooltip />
        <el-table-column label="操作">
          <!-- <template #header>
            <el-input v-model="containerBox.key" size="small" placeholder="关键字筛选" />
          </template> -->
          <template #default="scope">
            <el-button size="small" @click="
              toDetail(
                scope.row.container_state,
                scope.row.container_id,
                uniqueConnectTypes(scope.row.container_connects)
              )
              ">管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="table_pagination">
      <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="containerBox.page"
        :page-size="containerBox.count" :page-sizes="[10, 20, 50, 100]" @update:current-page="handleCurrentPageChange"
        @update:page-size="handlePageSizeChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table_box {
  display: flex;
  flex-direction: column;
  height: 50%;
}

.table_box .table_el {
  flex: 1;
}

.table_pagination {
  background-color: #fff;
  padding: 8px 30px;
  display: flex;
  justify-content: space-between;
}
</style>
